import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router';
require("./home.css");

class SetJob extends React.Component {

    constructor(){
        super();
        this.state = {
            userQuery: [],
            staffQuery: [],
            jobQuery: [],
            staff: '0',
            job: '0',
            duty: ''
        }
    }

    componentWillMount(){
        this.FetchUserData();
        this.FetchStaffData();
        this.FetchJobData();
    }

    //将当前选中的员工的user_id，company_id提交到服务器然后setState到userQuery里面
    FetchUserData(){
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        fetch("http://121.196.202.247:1010/select_user/?format=json", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                user_id: this.props.location.query.selectUser,
                company_id: userSessionStorage.company_id,
            })
        }) .then((response) => response.json())
            .then((responseText) => {
                this.setState({userQuery:responseText});
                console.log("1111111111"+JSON.stringify(responseText));
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    //将当前选中的员工的company_id提交到服务器然后setState到staffQuery里面
    FetchStaffData(){
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        fetch("http://121.196.202.247:1010/select_user/?format=json", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                company_id: userSessionStorage.company_id,
            })
        }) .then((response) => response.json())
            .then((responseText) => {
                this.setState({staffQuery:responseText});
                console.log("1111111112"+JSON.stringify(responseText));
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    //将当前选中的员工的company_id提交到服务器然后setState到jobQuery里面
    FetchJobData(){
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        fetch("http://121.196.202.247:1010/station/?format=json", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                company_id: userSessionStorage.company_id,
            })
        }) .then((response) => response.json())
            .then((responseText) => {
                this.setState({jobQuery:responseText});
                console.log("1111111113"+JSON.stringify(responseText));
            }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    // 下拉框选择上级更改staff值
    handleStaff(e){
        let value = e.target.value;
        // console.log(this.state.staff+"aa");
        this.setState({staff:value});
        console.log(this.state.staff+"aa");
    }

    // 下拉框选择岗位更改job值
    handleJob(e){
        let value = e.target.value;
        // console.log(this.state.job+"bb");
        this.setState({job: value});
        console.log(this.state.job+"bb");
    }

    // 改变职责里面的值
    handleDuty(e){
        this.setState({duty: e.target.value});
    }

    // 提交按钮点击事件
    handleSubmit(e) {
        e.preventDefault();
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));
        if(this.state.staff == '0'){
            alert("请选择上级");
        }else if(this.state.job == '0'){
            alert("请选择岗位");
        }else if(this.state.duty == '' ||this.state.duty == null){
            alert("请选择输入职责");
        }else{
            fetch("http://121.196.202.247:1010/webaddInfo/?format=json", {
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    "Content-Type": "application/json; charset=utf-8"
                },
                body: JSON.stringify({
                    user_id: this.props.location.query.selectUser,
                    company_id: userSessionStorage.company_id,
                    duty: this.state.duty,
                    station_name: this.state.job,
                    superior_id: this.state.staff
                })
            }) .then((response) => response.json())
                .then((responseText) => {
                    if(responseText.success == 'success info!'){
                        alert("提交成功！已成功设置该员工的上级为："+this.state.staff+"，岗位为："+this.state.job+"，职责为："+this.state.duty+"。");
                    }else{
                        alert("提交失败！请重新提交...");
                    }
                }).catch((error) => {alert(error+"连接职信服务器失败，请查看网络连接状态并刷新页面！")});
        }
    }

    render() {
        let staff = [];
        if(this.state.staffQuery.length == 0){}
        else {
            for(let i=0;i<this.state.staffQuery.length;i++) {
                if(this.state.staffQuery[i].user_id != this.props.location.query.selectUser){
                    staff.push(
                            <option value={this.state.staffQuery[i].user_id}>{this.state.staffQuery[i].user_id}&nbsp;&nbsp;{this.state.staffQuery[i].user_name}</option>
                    );
                }else{

                }
            }
        }

        let job = [];
        if(this.state.jobQuery.length == 0){}
        else {
            for(let i=0;i<this.state.jobQuery.length;i++) {
                job.push(
                    <option value={this.state.jobQuery[i].station_name}>{this.state.jobQuery[i].station_name}</option>
                );
            }
        }

        if(this.state.userQuery.length == 1){
            return (
                <div className="setJob_box">
                    <div>
                        <p>当前选中的员工为：{this.state.userQuery[0].user_name}，
                            职信号为：{this.state.userQuery[0].user_id}，请填写以下信息以更换该员工的岗位和职责：</p>
                        <form onSubmit={function (e) {this.handleSubmit(e)}.bind(this)}>
                            <div className="set_job">
                                <div>
                                    <select name="staff" id="staff" value={this.state.staff} onChange={this.handleStaff.bind(this)}>
                                        <option value="0">--请选择上级--</option>
                                        {staff}
                                    </select>
                                </div>
                                <div>
                                    <select name="job" id="job" value={this.state.job} onChange={this.handleJob.bind(this)}>
                                        <option value="0">--请选择岗位--</option>
                                        {job}
                                    </select>
                                </div>
                                <input type="text" placeholder="职责" className="add_duty" ref="set_job_duty" value={this.state.duty} onChange={this.handleDuty.bind(this)}/>
                            </div>
                            <div className="set_job_button">
                                <input type="submit" value="提交" className="setJob_commit"/>
                                <Link to='/home_query_hr'><input type="button" value="返回" className="set_job_back"/></Link>
                            </div>
                        </form>
                    </div>
                </div>
            );
        }else {
            return (
                <p>正在加载中......</p>
            );
        }
    }
}

export default SetJob;